Skip to main content

Number Field Component

1. Introduction​

The Number Field component is a specialized input field designed to accept numeric values. It is highly customizable and supports various configurations, such as labels, help messages, and validation. This component is essential for collecting numerical data, such as quantities, prices, or measurements, in a structured and user-friendly way.

Purpose and Use Cases​

  • Purpose: The Number Field component is used to collect numeric input from users in a controlled and validated manner.
  • Primary Use Cases:
    • Collecting quantities, prices, or measurements in forms.
    • Enabling users to input numeric data for calculations or analysis.
    • Providing a user-friendly interface for entering numbers with validation.

Benefits​

  • Customizable: Fully configurable properties, styles, and validation options.
  • Interactive: Supports tooltips, help messages, and dynamic behaviors.
  • Improved UX: Ensures accurate numeric input with validation and feedback.
  • Cross-Platform Compatibility: Works seamlessly on desktop, tablet, and mobile devices.

2. Properties​

The Number Field component comes with several configurable properties to suit different use cases. Below is a detailed breakdown:

Code​

  • Description: A unique identifier for the component.
  • Purpose: Used to reference the component programmatically.
  • Required/Optional: Required

Label​

  • Description: The text label displayed above or beside the number field.
  • Purpose: Provides context for the user about the purpose of the number field.
  • Required/Optional: Optional

Answer​

  • Description: The numeric value entered by the user in the number field.
  • Purpose: Captures the user's input for processing or storage.
  • Sub-Property:
    • Reset Button: Resets the number field to blank.
  • Required/Optional: Optional

Mandatory Field​

  • Description: Specifies whether the number field is required.
  • Purpose: Ensures that users provide input before proceeding.
  • Default: OFF
  • Required/Optional: Optional

Help​

  • Description: Displays a help message for the number field.
  • Purpose: Provides additional guidance or context for the user.
  • Default: OFF
  • Sub-Property:
    • Help Message: A textbox to input the help text.
  • Required/Optional: Optional

Enabled​

  • Description: Determines whether the number field is active or disabled.
  • Purpose: Controls the availability of the number field to users.
  • Default: ON
  • Required/Optional: Optional

3. Style​

The Number Field component offers extensive styling options to ensure it aligns with the application's design. Below are the key styling properties:

Size and Position​

  • Reset: Resets size and position settings to default.
  • Size:
    • Width & Height: Define the number field's dimensions.
    • Min Size: Minimum width and height (default: none).
    • Max Size: Maximum width and height (default: none).
  • Position:
    • Alignment: Left, right, top, bottom (default: left, top).
    • X Position: Horizontal offset from the edge.
    • Y Position: Vertical offset from the edge.
  • Z-Index: Specifies the stack order of the number field (default: 0).
  • Fixed Position: Locks the number field's position on the screen (default: OFF).
  • Hidden: Hides the number field from view (default: OFF).

Border​

  • Reset: Resets border settings to default.
  • Normal:
    • Edges: Left, right, top, bottom, or all edges.
    • Type: None, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit (default: none).
    • Color: Hexadecimal color code with a color picker.
    • Width: Border width in pixels.
    • Radius: Corner radius for rounded edges (default: none).
  • On Hover:
    • Same properties as "Normal" but applied when the number field is hovered.

Padding​

  • Reset: Resets padding settings to default.
  • Normal:
    • Sides: Left, right, top, bottom, or all edges.
    • Size: Padding size in pixels.
  • On Hover:
    • Same properties as "Normal" but applied when the number field is hovered.

Background​

  • Reset: Resets background settings to default.
  • Normal:
    • Background Color: Hexadecimal color code with a color picker (default: none).
    • Source: Media library or HTTP URL.
    • Attachment: Scroll, fixed, local, initial, inherit.
    • Position: X and Y positions in pixels (default: 0).
    • Repeat: Repeat, repeat-x, repeat-y, no-repeat, initial, inherit.
    • Size: Auto, length, cover, contain, initial, inherit.
    • Origin: Border-box, padding-box, content-box, initial, inherit.
  • On Hover:
    • Same properties as "Normal" but applied when the number field is hovered.

Label Font​

  • Reset: Resets label font settings to default.
  • Options:
    • Font Size: Pixels (default: 14).
    • Letter Spacing: Number expressed in em, px, or rem units.
    • Word Spacing: Number expressed in em, px, or rem units.
    • Line Height: Number expressed in em, px, or rem units.
    • Weight: Thin, light, extra light, normal, medium, semi-bold, bold, extra bold, black (default: normal).
    • Color: Hexadecimal color code with a color picker (default: none).
    • Stretch: Normal (default), semi-condensed, condensed, extra-condensed, ultra-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded.
    • Variant: Normal, small caps, initial, inherit.
    • Caps Variant: Normal, small caps, all small caps, mini caps, all mini caps, unicase, titling caps, initial, inherit.
    • Text Decoration:
      • Line: None, underline, overline, line-through, blink, initial, inherit.
      • Style: Solid, double, dotted, dashed, wavy, initial, inherit.
      • Thickness: Number expressed in em, px, or rem units (default: 1px).
      • Color: Hexadecimal color code with a color picker (default: none).

Answer Font​

  • Reset: Resets answer font settings to default.
  • Options: Same as Label Font.

Input Field Border​

  • Reset: Resets border settings to default.
  • Options: Same as Border.

Input Field Background​

  • Options: Same as Background.

4. Best Practices for UI/UX​

When and Why to Use​

  • Use the Number Field component to collect numeric input in forms, calculators, or data entry applications.
  • Ideal for responsive designs where numeric input fields need to adapt to different screen sizes.
  • Use tooltips or help messages to provide additional context for complex numeric fields.

Effective Scenarios​

  • Desktop: Use for forms, calculators, or data entry fields.
  • Tablet/Smartphone: Use for responsive designs with optimized number field sizes.

Tips for Optimal Use​

  • Ensure number fields are clearly labeled to avoid confusion.
  • Use validation to ensure accurate numeric input.
  • Provide visual feedback for errors or successful input.

5. Security Considerations​

Potential Risks​

  • Input Validation: Ensure that user input is validated to prevent malicious data entry.
  • Help Messages: Sanitize dynamic help messages to prevent XSS (Cross-Site Scripting) attacks.

Best Practices​

  • Use HTTPS for external resources to ensure secure communication.
  • Validate all user inputs before processing or storing them.
  • Escape any dynamic content displayed in tooltips or help messages.